<!DOCTYPE HTML>

<!--
Copyright 2014 Chris Devers

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html>
 <head>
  <meta charset="UTF-8">
  <title>Follow Me - Instructions</title>
  <link rel="stylesheet" href="simon.css">
  
  <style type="text/css">
  html, body {
    overflow: auto;
  }
  </style>
 </head>
 
 <body>
  <script type="text/javascript" src="button_events.js"></script>
  <script type="text/javascript" src="cookies.js"></script>
  
   <object data="images/start_button.svg" type="image/svg+xml" style="position:fixed;top:0%;left:0%;width:25%"></object>
   <object data="images/back_button.svg" type="image/svg+xml" style="position:fixed;top:0%;margin-left:25%;width:13%"></object>
  
  <table width="100%" height="100%">
   <tr>
    <td>
     <h1>How to Play</h1>
     <p>The buttons will flash one at a time. Pay attention to the sequence because you will have to reproduce it, and you will lose if you make a mistake
        three times. After all four buttons have flashed at the same time, press the buttons in the order in which you saw them flash. But be careful!
        Instead of pressing the button that flashed, you will need to press the appropriate one according to the diagram below (set on the Rules page):</p>
    </td>
   </tr>
   
   <tr>
    <td>
     <table width="100%" height="100%">
      <tr>
       <th>If this button flashes...</th>
       <th></th>
       <th>...press this button.</th>
      </tr>
      <tr>
       <th><img src="images/blue_game_button.svg" height="32px"></th>
       <th rowspan="4"><img src="images/arrow.svg" height="48px"></img></th>
       <th><img id="button0" height="32px"></th>
      </tr>
      <tr>
       <th><img src="images/red_game_button.svg" height="32px"></th>
       <th><img id="button1" height="32px"></th>
      </tr>
      <tr>
       <th><img src="images/green_game_button.svg" height="32px"></th>
       <th><img id="button2" height="32px"></th>
      </tr>
      <tr>
       <th><img src="images/yellow_game_button.svg" height="32px"></th>
       <th><img id="button3" height="32px"></th>
      </tr>
     </table>
    </td>
   </tr>
  </table>
  
  <script type="text/javascript">
    var gameButtonFilenames, NUM_BUTTONS, i;
    var prevPage = "../simon.html";
    
    gameButtonFilenames =
        ["images/blue_game_button.svg", "images/red_game_button.svg", "images/green_game_button.svg", "images/yellow_game_button.svg"];
    
    // For maximum modifiability, determine the number of buttons on the screen at runtime.
    var NUM_BUTTONS = 0;
    while (document.getElementById("button" + NUM_BUTTONS)) {
        NUM_BUTTONS += 1;
    }
    
    for (i = 0; i < NUM_BUTTONS; i += 1) {
        document.getElementById("button" + i).setAttribute("src", gameButtonFilenames[getRule(i)]);
    }
    
    /* Called when the Start Game button is pressed. */
    function startGame() {
        "use strict";
    
        // Go to the game page.
        window.location.href = "../game.html";
    }
  </script>
 </body>
</html>